<template>
  <div class="chart-container">
    <div class="chart" ref="chartRef"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "EchartsBarChart",
  props: {
    indicators: {
      type: Array,
      default: () => [
        "地区生产总值",
        "第一产业增加值",
        "第二产业增加值",
        "第三产业增加值",
        "建筑业增加值"
      ]
    },
    values: {
      type: Array,
      default: () => [232.3, 41.5, 58.5, 132.4, 23.7]
    },
    unit: {
      type: String,
    }
  },
  data() {
    return {
      myChart: null
    };
  },
  watch: {
    values: {
      deep: true,
      handler() {
        this.initChart();
      }
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      if (this.myChart) {
        this.myChart.dispose();
      }

      this.myChart = echarts.init(this.$refs.chartRef);

      const option = {
        grid: {
          right: 30,
          bottom: -25,
          top: 50,
          left: 20,
          containLabel: true
        },
       /* tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return `${params[0].name}<br>绝对值：${params[0].value} 亿元`;
          }
        },*/
        xAxis: {
          type: "category",
          data: this.indicators,
          axisLabel: {
            color: "#A3A3C9",
            rotate: 20,
            formatter: function (value) {
              const maxLength = 4;
              const valLength = value.length;
              const rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                let ret = "";
                for (let i = 0; i < rowN; i++) {
                  const start = i * maxLength;
                  const end = start + maxLength;
                  ret += value.substring(start, end) + "\n";
                }
                return ret;
              } else {
                return value;
              }
            }
          },
          axisLine: {
            lineStyle: {
              color: "#0B3771"
            }
          },
          axisTick: {
            show: false
          },
          offset: 10
        },
        yAxis: {
          type: "value",
          name: this.unit,
          nameTextStyle: {
            color: "#A3A3C9",
            fontSize: 16
          },
          axisLabel: {
            color: "#A3A3C9"
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "rgba(199,199,200,0.1)",
              type: "dashed"
            }
          }
        },
        series: [
          {
            data: this.values,
            type: "bar",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#0EEDFB"
                  },
                  {
                    offset: 1,
                    color: "#10294E"
                  }
                ]),
                opacity: 0.8
              }
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
              formatter: (params) => {
                return params.value;
              }
            }
          }
        ]
      };

      this.myChart.setOption(option);
    }
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
